<template>
	<div class="content giftBox">
		<div class="searchBox">
			<div>
				<div class="searchTop">
					<span class="searchText">手机号:</span><input type="text" class="searchInput" placeholder="请输入会员手机号" v-model="memberPhone">
					<span class="searchText">活动主题:</span><input type="text" class="searchInput" placeholder="请输入活动主题" v-model="activityTheme">
					<span class="searchText">奖品名称:</span><input type="text" class="searchInput" placeholder="请输入奖品名称" v-model="giftsName">
					<span class="searchText">核销人:</span><input type="text" class="searchInput" placeholder="请输入核销人" v-model="examineName">
					<div class="searchBut" @click="searchGiftList"><img src="../../assets/search.png" class="foundPic" />搜索</div>
					<div class="openBtn" @click="openBottom" v-show="showOpenBtn"></div>
					<div class="closeBtn" @click="closeBottom" v-show="showCloseBtn"></div>
				</div>
				<div v-show="showSearchBottom">
					<span class="searchText">奖品状态:</span>
					<select class="searchInput status" v-model="examineState">
						<option value="">请选择奖品状态</option>
						<option value="880017">待核销</option>
						<option value="880016">已核销</option>
						<option value="880015">已驳回</option>
						<option value="880012">已过期</option>
					</select>
					<span class="searchText">中奖日期区间:</span>
					<el-date-picker v-model="winTime" type="datetimerange" :picker-options="pickerOptions" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
					</el-date-picker>
					<span class="searchText">核销日期区间:</span>
					<el-date-picker v-model="examineTime" type="datetimerange" :picker-options="pickerOptions" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
					</el-date-picker>
				</div>
			</div>
		</div>
		<div class="tableBox">
			<div class="playBox">
				<div :class="[one,{'audit':classa,'gray':classb}]" @click="writeOffShow">批量核销</div>
			</div>
			<div class="contentTable">
				<div v-if="searchType == 1">
					<img src="~_assets/fail.png" class="searchResult">
				</div>
				<div v-else-if="searchType == 2">
					<img src="~_assets/nosearch.png" class="searchResult">
				</div>
				<bootstrap-table v-else :my_columns="my_columns" :my_data="data1" :my_options="my_options" ref="table" @item="getItem"></bootstrap-table>
			</div>
		</div>
		<div v-show="showAlertBox">
			<div class="alertBox">
				<div class="alertBk"></div>
				<div class="wordBox">
					<div class="alertHead">
						<p class="tittle">批量核销</p>
						<div class="myClose" @click="closeAlert">
							<img src="~_assets/close.png" class="myClose" />
						</div>
					</div>
					<div class="alertBody">
						<div class="changeDiv">
							<p>共计选择{{length}}个待核销条目</p>
						</div>
						<div class="changeDiv">
							<el-radio v-model="radio1" label="1">核销</el-radio>
							<el-radio v-model="radio1" label="2">驳回</el-radio>
						</div>
						<div class="alertBut">
							<button class="isFalse" @click="closeAlert">取消</button>
							<button class="isTrue" @click="writeOffIsTrue">确认</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { time } from "_config/common.js";
import {
  REALGIFT_CONDITION_LIST,
  REALGIFT_REJECT,
  REALGIFT_VERIFICATION
} from "@/config/url";
export default {
  mounted() {
    this.searchGiftList();
    $(".contentTable").on("click", ".rebut", this.rebut);
    $(".contentTable").on("click", ".writeOff", this.writeOff);
  },
  data() {
    return {
      one: "butInfoMes",
      classa: false,
      classb: true,
      searchType: "12",
      pickerOptions: time,
      radio1: "",
      length: 0, // 选中条数
      showSearchBottom: false,
      showCloseBtn: false,
      showOpenBtn: true,
      showAlertBox: false,
      memberPhone: "", //会员手机号
      activityTheme: "", // 活动主题
      giftsName: "", //奖品名称
      examineName: "", //核销人
      examineState: "", //奖品状态
      winTime: "", //中奖日期区间
      examineTime: "", //核销日期区间
      page: 1,
      size: 10,
      my_columns: [
        {
          checkbox: true
        },
        {
          title: "序号",
          field: "",
          formatter: function(value, row, index) {
            return index + 1;
          }
        },
        {
          title: "会员手机号",
          field: "memberPhone"
        },
        {
          title: "活动主题",
          field: "activityTheme"
        },
        {
          title: "获得奖品",
          field: "giftsName"
        },
        {
          title: "中奖日期",
          field: "winningTime",
          sortable: true
        },
        {
          title: "核销日期",
          field: "examineTime",
          sortable: true
        },
        {
          title: "核销人",
          field: "examine_name"
        },
        {
          title: "状态",
          field: "examineState",
          formatter: function(value, row, index) {
            if (value == 880016 || value == "880016") {
              value = "已核销";
            } else if (value == 880015 || value == "880015") {
              value = "已驳回";
            } else if (value == 880012 || value == "880012") {
              value = "已过期";
            } else if (value == 880017 || value == "880017") {
              return `<span class="underline rebut" data-id=${
                row.id
              }>驳回</span><span class="underline writeOff" data-id=${
                row.id
              }>核销</span>`;
            } else {
              value = "";
            }
            return value;
          }
        }
      ],
      data1: [],
      my_options: {
        pagination: true
        // sidePagination:'server'
      },
      config: {
        checkbox_rows: true,
        rows_selectable: true,
        card_title: "Vue Bootsrap 4 advanced table"
      }
    };
  },
  methods: {
    getItem(data) {
      this.classa = true;
      this.classb = false;
      let choseLength = {};
      choseLength = this.$refs.table.getSelections();
      this.length = choseLength.length;
      if (this.length <= 0) {
        this.classa = false;
        this.classb = true;
      }
    },
    openBottom() {
      this.showSearchBottom = true;
      this.showCloseBtn = true;
      this.showOpenBtn = false;
    },
    closeBottom() {
      this.showSearchBottom = false;
      this.showCloseBtn = false;
      this.showOpenBtn = true;
    },
    writeOffShow() {
      this.showAlertBox = true;
    },
    closeAlert() {
      this.showAlertBox = false;
    },
    // 实物礼品统计列表
    searchGiftList() {
      this.my_options = {
        pagination: true,
        sidePagination: "server",
        url: REALGIFT_CONDITION_LIST,
        queryParams: this.getParams
      };
    },
    getParams() {
      let winStartTime;
      let winEndTime;
      let examineStartTime;
      let examineEndTime;
      if (this.winTime == undefined || this.winTime == null || this.winTime == '') {
        winStartTime = "";
        winEndTime = "";
      } else {
        winStartTime = this.moment(this.winTime[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        winEndTime = this.moment(this.winTime[1]).format("YYYY-MM-DD HH:mm:ss");
      }
      if (this.examineTime == undefined || this.examineTime == null || this.examineTime == '') {
        examineStartTime = "";
        examineEndTime = "";
      } else {
        examineStartTime = this.moment(this.examineTime[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        examineEndTime = this.moment(this.examineTime[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      let param = {
        memberPhone: this.memberPhone,
        activityTheme: this.activityTheme,
        giftsName: this.giftsName,
        examineName: this.examineName,
        examineState: this.examineState,
        winStartTime: winStartTime,
        winEndTime: winEndTime,
        examineStartTime: examineStartTime,
        examineEndTime: examineEndTime,
        page: this.$refs.table.local.options.pageNumber,
        size: this.$refs.table.local.options.pageSize
      };
      return param;
    },
    // 多选时驳回核销操作
    writeOffIsTrue() {
      let items = {};
      items = this.$refs.table.getSelections();
      let ids = [];
      for (let item of items) {
        ids.push(item.id);
      }
      this.ids = ids.toString();
      if (this.radio1 == "") {
        this.$message({
          showClose: true,
          message: "请选择要执行的操作!"
        });
      } else if (this.radio1 == 1) {
        //1是核销
        this.$fetch(REALGIFT_VERIFICATION, {
          ids: this.ids
        }).then(
          res => {
            this.$message({
              showClose: true,
              type: "success",
              message: "已成功核销!"
            });
            this.searchGiftList();
            this.showAlertBox = false;
          },
          err => {
            this.$message({
              showClose: true,
              type: "warning",
              message: "网络异常,请稍后再试!"
            });
          }
        );
      } else if (this.radio1 == 2) {
        //2是驳回
        this.$fetch(REALGIFT_REJECT, {
          ids: this.ids
        }).then(
          res => {
            this.$message({
              showClose: true,
              type: "success",
              message: "已成功驳回!"
            });
            this.searchGiftList();
            this.showAlertBox = false;
          },
          err => {
            this.$message({
              showClose: true,
              type: "warning",
              message: "网络异常,请稍后再试!"
            });
          }
        );
      }
    },
    // 驳回
    rebut(e) {
      let ids = $(e.target).attr("data-id");
      this.$fetch(REALGIFT_REJECT, {
        ids: ids
      }).then(
        res => {
          this.$message({
            showClose: true,
            type: "success",
            message: "已成功驳回!"
          });
          this.searchGiftList();
        },
        err => {
          this.$message({
            showClose: true,
            type: "warning",
            message: "网络异常,请稍后再试!"
          });
        }
      );
    },
    // 核销
    writeOff(e) {
      let ids = $(e.target).attr("data-id");
      this.$fetch(REALGIFT_VERIFICATION, {
        ids: ids
      }).then(
        res => {
          this.$message({
            showClose: true,
            type: "success",
            message: "已成功核销!"
          });
          this.searchGiftList();
        },
        err => {
          this.$message({
            showClose: true,
            type: "warning",
            message: "网络异常,请稍后再试!"
          });
        }
      );
    }
  }
};
</script>

<style lang="less">
.giftBox {
  .status {
    margin-top: 0.08rem;
  }

  .searchTop {
    display: flex;
    align-items: center;
  }

  .openBtn {
    position: absolute;
    right: 0.1rem;
    width: 0.2rem;
    height: 0.15rem;
    background: url(../../assets/more.png) no-repeat;
  }

  .openBtn:hover {
    width: 0.25rem;
    height: 0.42rem;
    background: url(../../assets/hover.png) no-repeat;
    background-size: 100% 100%;
  }

  .closeBtn {
    position: absolute;
    top: 0;
    right: 0.1rem;
    width: 0.25rem;
    height: 0.66rem;
    background: url(../../assets/less.png) no-repeat;
    background-size: 100% 100%;
  }

  .el-input__inner {
    height: 0.18rem;
    border-radius: 8px;
    padding-left: 0.08rem;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(181, 194, 202, 1);
    margin-right: 0.2rem;
    margin-left: 0.04rem;
  }

  .contentTable {
    width: 99%;
  }

  .bootstrap-table {
    padding-top: 0;
  }
  .changeDiv {
    width: 100%;
    margin: auto;
    margin-bottom: 0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bs-checkbox {
    width: 42px;
  }
  .table-hover > thead > tr > th:first-child > .th-inner {
    padding: 0.062rem;
  }
  .writeOff {
    margin-left: 0.1rem;
  }
  .bootstrap-table table thead tr th,
  .bootstrap-table table tbody tr td {
    width: 6%;
  }
  .bootstrap-table table thead tr th:nth-of-type(1),
  .bootstrap-table table tbody tr td:nth-of-type(1) {
    width: 2.5%;
  }
}
</style>